<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘事件</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <!--
        Vue中常用的按键别名:
        回车:enter
        删除：delete(铺获删除和退格键)
        退出:esc
        空格:space
        换行：tab（特殊，必须配合keydown去使用）
        上：up
        下：down
        左:left
        右：right
        
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为keybab-case(短横线命名)

3.系统修饰键:ctrl,alt,shift,mata
 (1.).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
  (2.).配合keydown使用：正常触发事件

4.也可以用keyCode去指定具体的按键
5.Vue.config.keyCodes,自定义键名=键码,可以去定制按键别名
    -->

    <div id="root">
        <input id="ipt" type="text" placeholder="按下回车提示输入" value="12" @keyup.enter="show">
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {},
            methods: {
                show(event) {
                    let ipt = document.getElementById("ipt")
                    console.log(ipt.value)
                        // if (event.keyCode == 13) {
                        //     console.log("键盘按下事件")
                        // }
                }
            }
        });
    </script>

</body>

</html>